
import React, { Component } from 'react';
import { StyleSheet, View, Text, Alert } from 'react-native';

import FilterBar from '../../components/FilterBar';

export default class Inventory extends Component{

    static navigationOptions = ({navigation}) => ({
        title: (navigation.state.params.type === 0 ? '发货' : '到货') + '库存'
    });

    constructor(props){
        super(props);
        this.state = {
            type: this.props.navigation.state.params.type
        };
    }

    _onFilterBarItemPress(item, index, filterItem, filterItemIndex){
        //console.log(item);
        Alert.alert(item.text);
    }

    render(){

        const filterBarData = [
            {
                name: '全部状态',
                items: [
                    { text: '全部状态', value: 0 },
                    { text: '在途中', value: 1 },
                    { text: '已到达', value: 2 }
                ],
                selectedIndex: 0
            },
            {
                name: '全部到站',
                items: [
                    { text: '全部到站', value: 0 },
                    { text: '部分到站', value: 1 },
                    { text: '未到站', value: 2 }
                ],
                selectedIndex: 0
            },
            {
                name: '今天',
                items: [
                    { text: '今天', value: 0 },
                    { text: '昨天', value: 1 },
                    { text: '最近7天', value: 2 }
                ],
                selectedIndex: 0
            }
        ];

        return (
            <View style={styles.container}>
                <View style={styles.sortBarContainer}>
                    <FilterBar
                        data={filterBarData}
                        height={40}
                        onItemPress={
                            (item, index, filterItem, filterItemIndex) =>
                                this._onFilterBarItemPress(item, index, filterItem, filterItemIndex)}/>
                </View>
                <View style={styles.summaryContainer}>

                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    sortBarContainer: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: 40,
        flexDirection: 'row'
    },
    sortBarItem: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    },
    summaryContainer: {

    }
});